<style>
    .online-user{
        padding: 10px;
        height: 55px;
    }
    .online-user ul li{
        float: left;
        padding: 0 5px;
    }
    .online-user ul .outline img{
        opacity: 0.2!important;
    }
    .online-user ul li img{
        width: 35px;
        padding: 0 5px;
        border-radius: 50%;
        vertical-align: middle;
    }
    .chat {
        height: 500px;
        padding: 0px 15px;
        overflow-x: hidden;
        overflow-y: auto;
        background: #f5f6f7;
    }

    .chat ul .layim-chat-mine {
        text-align: right;
        padding-left: 0;
        padding-right: 60px;
    }

    .chat ul li {
        position: relative;
        font-size: 0;
        margin-bottom: 10px;
        padding-left: 60px;
        min-height: 68px;
    }

    .layim-chat-mine .layim-chat-user {
        left: auto;
        right: 3px;
    }

    .layim-chat-user {
        position: absolute;
        left: 3px;
    }
    .layim-chat-text {
        position: relative;
        line-height: 22px;
        margin-top: 25px;
        padding: 8px 15px;
        background-color: #e2e2e2;
        border-radius: 3px;
        color: #333;
        word-break: break-all;
        max-width: 462px\9;
    }
    .layim-chat-mine .layim-chat-text {
        margin-left: 0;
        text-align: left;
        background-color: #409EFF;
        color: #fff;
    }

    .layim-chat-user {
        position: absolute;
        left: 3px;
    }

    .layim-chat-user img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
    }

    .layim-chat-text {
        position: relative;
        line-height: 22px;
        margin-top: 25px;
        padding: 8px 15px;
        background-color: #e2e2e2;
        border-radius: 3px;
        color: #333;
        word-break: break-all;
        max-width: 462px \9;
    }

    .layim-chat-text, .layim-chat-user {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        vertical-align: top;
        font-size: 14px;
    }

    .layim-chat-mine .layim-chat-user cite {
        left: auto;
        right: 60px;
        text-align: right;
    }

    .layim-chat-user cite {
        position: absolute;
        left: 60px;
        top: -2px;
        width: 500px;
        line-height: 24px;
        font-size: 12px;
        white-space: nowrap;
        color: #999;
        text-align: left;
        font-style: normal;
    }

    .layim-chat-mine .layim-chat-user cite i {
        padding-left: 0;
        padding-right: 15px;
    }

    .layim-chat-user cite i {
        padding-left: 15px;
        font-style: normal;
    }
    .layim-chat-footer {
        border-top: 1px solid #F1F1F1;
    }
    .layim-chat-tool {
        position: relative;
        padding: 0 8px;
        height: 38px;
        line-height: 38px;
        font-size: 0;
    }
    .layim-chat-tool span {
        position: relative;
        margin: 0 10px;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        vertical-align: top;
        font-size: 24px;
        cursor: pointer;
    }
    .layim-chat-tool .layim-tool-log {
        position: absolute;
        right: 5px;
        font-size: 14px;
    }
    .layim-tool-log i {
        position: relative;
        top: 2px;
        margin-right: 5px;
        font-size: 20px;
        color: #999;
    }
    .layim-chat-textarea {
        background: #f5f6f7;
    }
    .layim-chat-textarea textarea {
        display: block;
        width: 100%;
        padding: 10px;
        height: 68px;
        line-height: 20px;
        border: none;
        overflow: auto;
        resize: none;
        background: 0 0;
    }

</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 右 -->
        <div class="layui-col-sm12 layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-col-md12 online-user">
                        <ul>
                        </ul>
                    </div>
                    <div class="layui-col-md12 chat">
                        <ul>

                        </ul>
                    </div>
                    <div class="layui-col-md12 layim-chat-footer" style="box-sizing: content-box;">
                        <div class="layui-unselect layim-chat-tool">
                            <span class="layui-icon layim-tool-face" title="选择表情" layim-event="face"></span>
                            <span class="layim-tool-log" layim-event="chatLog"><i class="layui-icon"></i>聊天记录</span>
                        </div>
                        <div class="layim-chat-textarea"><textarea></textarea></div>
                    </div>
                    <div style="padding-bottom: 10px;text-align: right;">
                        <button class="layui-btn layui-btn-sm" lay-active="send_text">发送</button>
                        <!--                <button class="layui-btn layui-btn-sm" lay-active="add">添加</button>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js部分 -->
<script>
    layui.use(['layer', 'util', 'element', 'notice','setter'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var setter = layui.setter;
        var token=setter.getToken().access_token;
        var uid=setter.getUser().uid;
        var to_id=0;
        var master_info=[];
        var util = layui.util;
        var element = layui.element;
        var notice = layui.notice;
        var socket;
        var ws_url=setter.getUser().ws_url;
        /* 打开连接事件 */
        try {
            /* 连接 */
            socket = new WebSocket(ws_url);
            /* 绑定事件 */
            socket.onopen = function () {
                socket.send(JSON.stringify({'type':1,'token':token}));
                setInterval(function(){
                    socket.send(JSON.stringify({'type':0}))
                },50000);

                notice.msg('连接成功',{icon:1})
            };

            socket.onmessage = function (e) {
                var message=JSON.parse(e.data);
                var html='';
                if(message.type==1){
                    var master_html='';
                    $.each(message.list, function ( index, item ) {
                        if(item.online==1){
                            master_html+='<li><img src="'+item.avatar+'" alt="">'+item.nickname+'</li>';
                        }else{
                            master_html+='<li class="outline"><img src="'+item.avatar+'" alt="">'+item.nickname+'</li>';
                        }
                        master_info.push({'avatar':item.avatar,'uid':item.uid,'nickname':item.nickname});
                    });
                    $('.online-user ul').html(master_html);
                }else if(message.type==2){
                    var info=master_info.filter(function (value) {
                        return value.uid === message.uid;
                    });
                    if(uid==message.uid){
                        html += '<li class="layim-chat-mine">\n' +
                            '                        <div class="layim-chat-user">\n' +
                            '                            <img src="'+info[0].avatar+'">' +
                            '                            <cite><i>'+message.time+'</i>'+info[0].nickname+'</cite>\n' +
                            '                        </div>\n' +
                            '                        <div class="layim-chat-text">'+message.msg+'</div>\n' +
                            '                    </li>';
                    }else{
                        html += '<li>\n'+
                            '<div class="layim-chat-user">\n' +
                            '       <img src="'+info[0].avatar+'">' +
                            '           <cite>'+info[0].nickname+'<i>'+message.time+'</i></cite>\n' +
                            '    </div>\n' +
                            '    <div class="layim-chat-text">' + message.msg + '</div>\n' +
                            '</li>';
                    }
                    var height=$('.chat')[0].scrollHeight;
                    $('.chat').scrollTop(height);
                    $('.chat ul').append(html);
                }else if(message.type==3){
                    notice.msg('登录失效')
                }

            };

            socket.onclose = function () {
                console.log('关闭连接')
            };
        } catch (exception) {
            console.log('有错误发生')
        }
//事件
        util.event('lay-active', {
            send_text: function (othis) {
                var text=$('.layim-chat-textarea textarea').val();
                if (text.length === 0) {
                    return notice.msg('请输入内容');
                }
                socket.send(JSON.stringify({'type':2,'token':token,'data':text,'to_id':to_id}));
                $('.layim-chat-textarea textarea').val('');
            }
            , add: function (othis) {

            }

        });
        $('.layim-chat-textarea textarea').keypress(function(event){
            if(event.keyCode ==13){
                var text=$('.layim-chat-textarea textarea').val();
                if (text.length === 0) {
                    return false;
                }
                $('.layim-chat-textarea textarea').val(null);
                socket.send(JSON.stringify({'type':2,'token':token,'data':text,'to_id':to_id}));
                return false
            }
        });
        $('.layim-chat-textarea textarea').keyup(function(event){
            if(event.keyCode ==13){
                var height=$('.chat')[0].scrollHeight;
                $('.chat').scrollTop(height);
                return false
            }
        });
    });
</script>
